<template>
  <van-field 
    autosize 
    :type="types" 
    :readonly='!canEdit' 
    :required='required' 
    :name="name" 
    v-model="v_model" 
    :value='value'
    :label="label" 
    :label-width="label_width"  
    input-align="left"
    :right-icon="canEdit?'arrow':''" 
    :placeholder="placeholder" 
    :rules="[{ required: required, message: '' }]"/>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      types:'text',
      label_width:'',
      v_model:this.model
    }
  },
  watch: {
    model: {
      handler () { 
        this.v_model=this.model
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化mutated
      immediate: false //刷新加载  立马触发一次handler
    },
    v_model: {
      handler (newVal,oldVal) { 
        let obj = {
          name: this.name,
          data: newVal
        }
        console.log('QQQQQ'+this.name)
        this.$emit('freshData',obj)
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化mutated
      immediate: false //刷新加载  立马触发一次handler
    },
  }, 
  props: {
    type:String,
    canEdit:Boolean,
    required:Boolean,
    name:String,
    model:String,
    value:String,
    label:String,
    placeholder:String
  },
  created(){
    console.log('传入的数据'+this.model)
    if(this.type){
      this.types=this.type
    }
    let length = 0;
    for (let i = 0; i < this.label.length; i++) {
      const charCode = this.label.charCodeAt(i);
      if (charCode >= 0 && charCode <= 127) {
        length += 0.75;
      } else {
        length += 1;
      }
    }
    if(length >= 11) length=11;
    this.label_width=length+'em'
  }
}
</script>